import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety_flutter3/flutter_swiper_null_safety_flutter3.dart';
import 'package:puppy_store/models/home_model.dart';
import 'package:puppy_store/pages/home/widgets/loadingBg.dart';
import 'package:puppy_store/widgets/custom_image.dart';

class ImageSwiperWidget extends StatelessWidget {
  ImageSwiperWidget({
    this.imageBanners,
    this.height = 140,
    this.borderRadius = 4.0,
    this.type = CustomSwiperPaginationType.rect,
    super.key,
  });

  // 轮播图数据
  final List<ImageBannersModel>? imageBanners;
  // 轮播图组件高度
  final double? height;

  // 轮播图组件圆角
  final double? borderRadius;

  // 指示器的类型
  final CustomSwiperPaginationType? type;

  @override
  Widget build(BuildContext context) {
    return imageBanners != null
        ? Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(borderRadius!),
          ), // 设置圆角
          clipBehavior: Clip.antiAlias, // 裁剪圆角
          height: height,
          // Swiper组件需要设置高度才能展示出来
          child: Swiper(
            itemBuilder: (BuildContext context, int index) {
              return CustomImage(
                url: imageBanners![index].imgUrl!,
                height: height,
              );
              // Image.network(
              //   imageBanners![index].imgUrl!,
              //   fit: BoxFit.cover, // 图片填充方式
              // );
            },
            itemCount: imageBanners?.length ?? 0,
            pagination: SwiperPagination(
              // builder: SwiperPagination.dots,
              // 三种形式的分页指示器 dot(点), fraction(分数 如:1/5), rect(方形)
              builder: CustomSwiperPagination(type: type), // 自定义分页指示器
              margin: EdgeInsets.only(bottom: 10), // 分页指示器距离底部的距离
            ), // 分页指示器
            autoplay: true, // 自动播放
          ),
        )
        : LoadingImgWidget(height: height, borderRadius: borderRadius);
  }
}

// 枚举: 定义指示器类型
enum CustomSwiperPaginationType {
  rect, // 矩形
  dots, // 点
  line, // 直线
}

// 自由选择是圆形还是矩形
class CustomSwiperPagination extends SwiperPlugin {
  CustomSwiperPagination({this.type});

  // 自定义分页指示器
  final CustomSwiperPaginationType? type;

  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    // config 可以提供指示器元素个数和当前展示的指示器索引
    // 获取个数
    int itemCount = config.itemCount;
    // 获取高亮索引
    int activeIndex = config.activeIndex;

    // 指示器元素列表
    List<Widget> indicators = [];

    // 循环创建指示器的元素
    for (int i = 0; i < itemCount; i++) {
      indicators.add(
        Container(
          child:
              type == CustomSwiperPaginationType.rect
                  ? Container(
                    width: 10,
                    height: 3,
                    margin: EdgeInsets.symmetric(horizontal: 5),
                    color: i == activeIndex ? Colors.white : Colors.green,
                  )
                  : ClipOval(
                    child: Container(
                      width: 10,
                      height: 10,
                      margin: EdgeInsets.symmetric(horizontal: 5),
                      alignment: Alignment.topCenter,
                      decoration: BoxDecoration(
                        color: i == activeIndex ? Colors.white : Colors.green,
                        border: Border.all(
                          color: i == activeIndex ? Colors.green : Colors.white,
                          width: 1,
                        ),
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
        ),
      );
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      // 自定义指示器样式
      children: indicators,
    );
  }
}

// 自定义矩形指示器
/* class CustomSwiperPagination extends SwiperPlugin {
  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    // config 可以提供指示器元素个数和当前展示的指示器索引
    // 获取个数
    int itemCount = config.itemCount;
    // 获取高亮索引
    int activeIndex = config.activeIndex;

    // 指示器元素列表
    List<Widget> indicators = [];

    // 循环创建指示器的元素
    for (int i = 0; i < itemCount; i++) {
      indicators.add(
        Container(
          width: i == activeIndex ? 16 : 13,
          height: 3,
          margin: EdgeInsets.symmetric(horizontal: 5),
          color: i == activeIndex ? Colors.white : Colors.green,
        ),
      );
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      // 自定义指示器样式
      children: indicators,
    );
  }
} */

// 自定已圆形指示器
/* class CustomSwiperPagination extends SwiperPlugin {
  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    // config 可以提供指示器元素个数和当前展示的指示器索引
    // 获取个数
    int itemCount = config.itemCount;
    // 获取高亮索引
    int activeIndex = config.activeIndex;

    // 指示器元素列表
    List<Widget> indicators = [];

    // 循环创建指示器的元素
    for (int i = 0; i < itemCount; i++) {
      indicators.add(
        Container(
          width: 20,
          height: 20,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: ClipOval(
            child: Container(
              alignment: Alignment.topCenter,
              decoration: BoxDecoration(
                color: i == activeIndex ? Colors.white60 : Colors.green,
                border: Border.all(
                  color: i == activeIndex ? Colors.green : Colors.white,
                  width: 1,
                ),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Text(
                '$i',
                style: TextStyle(
                  color: i == activeIndex ? Colors.green : Colors.white,
                ),
              ),
            ),
          ),
        ),
      );
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      // 自定义指示器样式
      children: indicators,
    );
  }
} */
